/**
 * 路由权限管理 路由分为用户路由和权限路由
 * 用户路由：所有人都可以看到，权限路由：只有拥有权限可以得到
 * 实现路由权限的几种方法 
 * 参考链接
 * https://blog.csdn.net/alxiao/article/details/119821626?spm=1001.2101.3001.6650.15&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-15.pc_relevant_paycolumn_v3&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-15.pc_relevant_paycolumn_v3&utm_relevant_index=19
 * */

// 全局路由守卫 

/**
 * 首先全局守卫需要登录，没有登录会直接跳转登录页面，然后通过登录的以后获取后台的权限，判断页面是否跳转
 * 全局路由守卫这种形式需要把所有的路由都写出来(同时展示出来)
 * iview-admin 采用的这种方式
 * 
 * 实现：
 * 前端定义好路由，并且在路由上标记相应的权限信息
 * 缺点：
 * 加载所有路由，如果路由很多的情况下，会有性能问题
 * 每次跳转都需要做权限判断
 * 菜单写死在前端，不利于维护
 * 菜单跟路由耦合在一起，定义路由的时候还需要添加菜单，并且路由可能不是菜单展示的时候，需要多余的字段里控制
 */
const routerMap = [
    {
        path:"/home",
        component: "XXX",    // 引入页面路劲
        redirect: '/home/index',  // 重定向页面
        alwaysShow: true,
        meta: {
            title: 'home',          // title名称
            icon: 'lock',                 // 自定义图标
            roles: ['admin', 'editor']    // 这个页面的哪有写角色可以登录
        },
        children: [
            {
                path: 'page',
                component: () => import('XXXX'),
                name: 'page',
                mete: {
                    title: 'page',
                    roles: ['admin']
                }
            },
            {
                path: 'directive',
                component: () => import('XXXX'),
                name: 'directive',
                mete: {
                    title: 'directive',
                    roles: ['admin']
                }
            }
        ]
    }
]

/**
 * 登录页与主应用分离
 * 针对前一种实现的缺点，可以把登录页和主应用放到不同页面(不在同一个Vue的应用实例)
 * 页面登录以后，页面跳转(页面跳转，不是路由跳转)，用户权限传递到主应用所在页面，主应用初始化之前，根据用户权限筛选路由，筛选后的路由作为vue的实例参数
 * 实现：
 * 登录成功后，进行页面跳转 (真正的页面跳转，不是路由跳转)，并将用户权限传递到主应用所在页面，主应用初始化之前，根据用户权限筛选路由，筛选后的路由作为 vue 的实例化参数，而不是像前一种方式所有的路由都传递进去，也不需要在全局路由守卫里做权限判断了。
 * 缺点：
 * 1、需要页面跳转，不是单纯的单页面应用
 * 2、菜单写死在前端，不利于维护
 * 3、菜单和路由耦合
 * 
*/

/**
 * 使用 addRoutes 动态挂载路由
 * addRoutes 允许在应用初始化后，动态的挂在路由。
 * 实现：
 * 应用初始化的时候先挂在不需要权限控制的路由，比如登录页、404、报错页面
 * 还有就是addRouters什么时候调用，在那里调用
 * 登陆后，获取用户权限信息，然后筛选有权限的访问路由，在调用addRouters添加路由
 * 这个方法会导致每次进入登录，刷新页面又需要登录一次，所以把addRoutes 放在全局路由守卫里边调用
 * 缺点：
 * 全局路由守卫里，每次路由跳转都要做判断
 * 菜单信息写死在前端，要改个显示文字或权限信息，需要重新编译
 * 菜单跟路由耦合在一起，定义路由的时候还有添加菜单显示标题，图标之类的信息，而且路由不一定作为菜单显示，还要多加字段进行标识
 * 
*/

/**
 * 菜单与路由分离，菜单由后端返回
 * 菜单的显示标题，图片等需要随时更改，要对菜单做管理功能。后端直接根据用户权限返回可访问的菜单。
 * 实现：
 * 前端定义路由信息 ( 标准的路由定义，不需要加其他标记字段 )
 * 缺点
 * 菜单需要与路由做一一对应，前端添加了新功能，需要通过菜单管理功能添加新的菜单，如果菜单配置的不对会导致应用不能正常使用。
 * 全局路由守卫里，每次路由跳转都要做判断
*/

/**
 * 菜单与路由完全由后端返回
 * 后端只返回name和path 不需要返回component
 * 缺点：
 * 全局路由守卫里，每次路由跳转都要做判断，前后端的配合要求更高
*/

/**
 * 不使用全局路由守卫
 * 实现：
 * 应用初始化的时候只挂载不需要权限控制的路由
*/